
<template>
    <!-- 分销设置 -->
    <div class="">
        <div class="head">
            <span>分销设置</span>
        </div>
        <!-- 基础信息 -->
        <div class="information">
          <div class="information-head">基础信息</div>
          <div class="information-view">
            <div>
              <span>是否启用分销商</span>
              <div class="mb-2 flex items-center text-sm">
                        <el-radio-group v-model="radio1" class="ml-4" >
                        <el-radio label="启用" size="large">启用</el-radio>
                        <el-radio label="禁用" size="large">禁用</el-radio>
                        </el-radio-group>
                </div>
            </div>
            <div style="margin-bottom: 20px;">
              <span>分销商层级</span>
              <div class="mb-2 flex items-center text-sm">
                        <el-radio-group v-model="radio2" class="ml-4" >
                        <el-radio label="一级分销" size="large">一级分销</el-radio>
                        <el-radio label="二级分销" size="large">二级分销</el-radio>
                        <el-radio label="三级分销" size="large">三级分销</el-radio>
                        </el-radio-group>
                        <div class="information-view-span1">前往<router-link to="/Grade">分销商等级</router-link>设置佣金比例</div>
                </div>
            </div>
            <div style="margin-bottom: 20px;">
              <span>分销自销</span>
              <div class="mb-2 flex items-center text-sm">
                        <el-radio-group v-model="radio3" class="ml-4" >
                          <el-radio label="不允许" size="large">不允许</el-radio>
                        <el-radio label="自购返佣" size="large">自购返佣</el-radio>
                        <el-radio label="自购优惠" size="large">自购优惠</el-radio>
                        </el-radio-group>
                        <div class="information-view-span2">选择自购优惠,则原本的佣金作为优惠金额见面减免,只需对剩下的金额付款</div>
                </div>
            </div>
            <div style="margin-bottom: 20px;">
              <span>分销开放人群</span>
              <div class="mb-2 flex items-center text-sm">
                        <el-radio-group v-model="radio4" class="ml-4" >
                        <el-radio label="仅开放给分销商" size="large">仅开放给分销商</el-radio>
                        <el-radio label="想所有用户开放" size="large">想所有用户开放</el-radio>
                        </el-radio-group>
                        <div class="information-view-span3">选择仅开放给分销商，则仅分销商的个人中心显示出分销中心入口</div>
                </div>
            </div>

          </div>
        </div>
        <!-- 分销商资格 -->
        <div class="qualification">
          <div class="qualification-head">分销商资格</div>
          <div class="qualification-view">
            <div class="qualification-view-head"><span>*</span><span>成为分销商</span></div>
            <div class="qualification-view-a">
              <div>是否需要审核</div>
              <div class="mb-2 flex items-center text-sm">
                        <el-radio-group v-model="radio5" class="ml-4" >
                        <el-radio label="无需审核" size="large">无需审核</el-radio>
                        <el-radio label="需审核" size="large">需审核</el-radio>
                        </el-radio-group>
              </div>
              <div style="margin-top: 10px;">是否需要填写申请信息</div>
              <div class="mb-2 flex items-center text-sm">
                        <el-radio-group v-model="radio6" class="ml-4" >
                        <el-radio label="无需填写" size="large">无需填写</el-radio>
                        <el-radio label="需填写" size="large">需填写</el-radio>
                        </el-radio-group>
              </div>
              <div class="tian">
                <div class="tian-head">
                  <span>信息名称</span>
                  <span>操作</span>
                </div>
                <div class="tian-name">
                  <input type="text" placeholder="姓名">
                </div>
                <div class="tian-button">
                  <button>+添加申请信息</button>
                  <span>最多添加5条申请信息</span>
                </div>
                <div class="hh1">满足条件</div>
                <div class="mb-2 flex items-center text-sm hh">
                        <el-radio-group v-model="radio7" class="ml-4" >
                        <el-radio label="无条件" size="large">无条件</el-radio>
                        <el-radio label="累计消费金额" size="large">累计消费金额</el-radio>
                        <el-radio label="累计消费次数" size="large">累计消费次数</el-radio>
                        <el-radio label="购买任意商品" size="large">购买任意商品</el-radio>
                        <!-- <el-radio label="购买指定商品" size="large">购买指定商品</el-radio> -->
                        </el-radio-group>
                </div>
                <div class="hh2">
                  <div class="hh2-b" v-if="radio7=='累计消费金额'">
                    <div class="hh2-b-1">累计消费金额</div>
                    <input type="text" class="hh2-b-2">
                    <div class="hh2-b-3">元</div>
                  </div>
                  <div class="hh2-b" v-if="radio7=='累计消费次数'">
                    <div class="hh2-b-1">累计消费次数</div>
                    <input type="text" class="hh2-b-2">
                    <div class="hh2-b-3">次</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 分销下线 -->
        <div class="Offline">
          <div class="Offline-head">分销下线</div>
          <div class="Offline-a">
            <span>成为下线条件</span>
                <div class="mb-2 flex items-center text-sm hh">
                        <el-radio-group v-model="radio8" class="ml-4" >
                        <el-radio label="1" size="large">首次点击分享链接</el-radio>
                        <el-radio label="2" size="large">首次付款</el-radio>
                        </el-radio-group>
                </div>
          </div>
          <div class="Offline-b">
            <span>绑定关系模式</span>
            <div class="mb-2 flex items-center text-sm hh">
                        <el-radio-group v-model="radio9" class="ml-4" >
                        <el-radio label="1" size="large">永久绑定模式</el-radio>
                        <el-radio label="2" size="large">保护期模式</el-radio>
                        </el-radio-group>
                </div>
          </div>
          <div class="Offline-c">
            <div>*保护期</div>
            <input type="text">
            <div class="Offline-tian">天</div>
            <span>之后解除关系</span>
          </div>
          <span class="Offline-d">请输入1~30000之间的整数</span>
        </div>
        <button class="baobutton">保存</button>
    </div>
</template>

<script lang="ts" setup>
import {  ref } from 'vue';
//单选框
const radio1=ref('')
const radio2=ref('')
const radio3=ref('')
const radio4=ref('')
const radio5=ref('')
const radio6=ref('')
const radio7=ref('无条件')
const radio8=ref('')
const radio9=ref('')

</script>

<style scoped lang="less">
.head{
    width: 100%;
    height: 40px;
    background-color: white;
    span{
        margin-left: 10px;
        line-height: 40px;
        font-size: 14px;
    }
}
// 基础信息
.information{
  width: 100%;
  height: 331px;
  padding: 10px;
  box-sizing: border-box;
  background-color: white;
  border-radius: 5px;
  margin-top: 20px;
  position: relative;
}
.information-head{
  border-left: 5px solid #ed742f;
  box-sizing: border-box;
  padding-left: 10px;
}
.information-view{
  margin-top: 20px;
  >div{
    display: flex;
    align-items: center;
    margin-top: 10px;
    span{
      margin-left: 30px;
      width: 150px;
      text-align: right;
      margin-right: 20px;
    }
  }
}
.information-view-span1{
position: absolute;
top: 140px;
left:210px;
font-size: 13px;
color: #AAAAAA;
a{
  text-decoration: none;
  color: #ED742F;
}
}
.information-view-span2{
position: absolute;
top: 200px;
left:210px;
font-size: 13px;
color: #AAAAAA;
}
.information-view-span3{
position: absolute;
top: 260px;
left:210px;
font-size: 13px;
color: #AAAAAA;
}
// 分销资格
.qualification{
  width: 100%;
  height:600px;
  background-color: white;
  border-radius: 5px;
  margin-top: 10px;
  box-sizing: border-box;
  padding: 10px;
}
.qualification-head{
  border-left: 5px solid #ed742f;
  box-sizing: border-box;
  padding-left: 10px;
}
.qualification-view{
  display: flex;
  margin-top: 20px;
}
.qualification-view-head{
  span:nth-child(1){
    color: red;
  }
  span:nth-child(2){
    color: #7F7F7F;
    font-size: 14px
  }
  margin-left: 100px;
  margin-right: 20px;
  display: flex;
  height: 18px;
  align-items:center
}
.qualification-view-a{
  font-size: 14px;
  color: #494949;
  white:100%
}
.tian{
  width: 300px;

}
.tian-head{
  background-color: #f2f2f2;
  width: 100%;
  display: flex;
  height:38px;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 5px;
  align-items: center;
}
.tian-name{
  width: 100%;
  height:42px;
  border-bottom: 1px solid #f2f2f2;
  line-height: 40px;
  input{
    height: 25px;
  }
}
.tian-button{
  width: 100%;
  margin-top: 5px;
  button{
    width: 120px;
    color: #ED742F;
    background-color: white;
    border-radius: 5px;
    border: 1px solid #f2f2f2;
    height:30px
  }
  span{
    color: #7F7F7F;
    margin-left: 10px;
  }
}
.hh1{
  margin-top: 20px;
}
.hh{
  width: 700px;
}
.hh2{
  width:630px;
  height:250px;
  // background-color:rgb(222, 128, 128);
  .hh2-b{
    display:flex ;
    margin-top: 20px;
    .hh2-b-1{
      width: 84px;
      height: 36px;
      border-right: 0px !important;
      border: 1px solid black;
      display: flex;
      align-items: center;
    }
    .hh2-b-2{
      width: 150px;
      height: 32px;
    }
    .hh2-b-3{
      width: 35px;
      height: 36px;
      border: 1px solid black;
      border-left: 0px !important;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

// 分销下线
.Offline{
  width: 100%;
  height: 300px;
  background-color: white;
  margin-top: 10px;
  box-sizing: border-box;
  padding: 10px;

}
.Offline-head{
  border-left: 5px solid #ed742f;
  box-sizing: border-box;
  padding-left: 10px;
}
.Offline-a{
  display: flex;
  align-items: center;
  span{
    font-size: 15px;
    margin-left: 80px;
    color: #7F7F7F;
    margin-right: 30px;
  }
}
.Offline-b{
  display: flex;
  align-items: center;
  span{
    font-size: 15px;
    margin-left: 80px;
    color: #7F7F7F;
    margin-right: 30px;
  }
}
.Offline-c{
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-top: 20px;
  margin-bottom: 10px;
  >div:nth-child(1){
    margin-left: 203px;
    margin-right: 5px;
  }
  input{
    width: 130px;
    height:30px
  }
  .Offline-tian{
    width: 30px;
    height: 33px;
    border: 1px solid black;
    border-left: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
  }
  
}
.Offline-d{
    font-size: 12px;
    color:red;
    margin-left: 250px;
    margin-top: 20px;
    
  }
  // 保存按钮
  .baobutton{
     width: 120px;
     height:40px;
     background-color: #ed742f;
     color: white;
     border: 0;
     border-radius: 5px;
     margin-top: 10px;

  }
</style>